import React, { useState, useRef, useLayoutEffect } from 'react';
import {GridContent} from '@ant-design/pro-layout';
import { Menu } from 'antd';
import BaseView from './components/base';
import SecurityView from './components/security';
import FamilyView from './components/FamilyType';
import IncomeView from './components/IncomeType'
import PaymentView from './components/PaymentType'
import styles from './style.less';
import {useLocation} from "react-router";

const { Item } = Menu;

type SettingsStateKeys = 'base' | 'security' | 'family' | 'income' | 'payment';
type SettingsState = {
  mode: 'inline' | 'horizontal';
  selectKey: SettingsStateKeys;
};

const Settings: React.FC = () => {
  const menuMap: Record<string, React.ReactNode> = {
    base: '基本设置',
    security: '密码设置',
    family: '消费成员',
    income: '收入类型',
    payment: '支出类型'
  };

  let [initConfig, setInitConfig] = useState<SettingsState>({
    mode: 'inline',
    selectKey: 'base',
  });

  const dom = useRef<HTMLDivElement>();
  const resize = () => {
    requestAnimationFrame(() => {
      if (!dom.current) {
        return;
      }
      let mode: 'inline' | 'horizontal' = 'inline';
      const { offsetWidth } = dom.current;
      if (dom.current.offsetWidth < 641 && offsetWidth > 400) {
        mode = 'horizontal';
      }
      if (window.innerWidth < 768 && offsetWidth > 400) {
        mode = 'horizontal';
      }
      setInitConfig({ ...initConfig, mode: mode as SettingsState['mode'] });
    });
  };

  useLayoutEffect(() => {
    if (dom.current) {
      window.addEventListener('resize', resize);
      resize();
    }
    return () => {
      window.removeEventListener('resize', resize);
    };
  }, [dom.current]);

  const getMenu = () => {
    return Object.keys(menuMap).map((item) => <Item key={item}>{menuMap[item]}</Item>);
  };

  const renderChildren = () => {
    const { selectKey } = initConfig;
    switch (selectKey) {
      case 'base':
        return <BaseView />;
      case 'security':
        return <SecurityView />;
      case 'family':
        return <FamilyView />;
      case 'income':
        return <IncomeView />;
      case 'payment':
        return <PaymentView />;
      default:
        return null;
    }
  };

  // 根据URL传参，定位到密码设置页面
  const {search} = useLocation();
  const searchParams = React.useMemo(() => new  URLSearchParams(search), [search]);
  const tagKey = searchParams.get("tag")
  if (tagKey){

    // @ts-ignore
    initConfig = {mode: 'inline', selectKey:tagKey}
  }

  return (
      <GridContent style={{marginTop: 25}}>
        <div
          className={styles.main}
          ref={(ref) => {
            if (ref) {
              dom.current = ref;
            }
          }}
        >
          <div className={styles.leftMenu}>
            <Menu
              mode={initConfig.mode}
              selectedKeys={[initConfig.selectKey]}
              onClick={({ key }) => {
                setInitConfig({
                  ...initConfig,
                  selectKey: key as SettingsStateKeys,
                });
              }}
            >
              {getMenu()}
            </Menu>
          </div>
          <div className={styles.right}>
            {/*<div className={styles.title}>{menuMap[initConfig.selectKey]}</div>*/}
            {renderChildren()}
          </div>
        </div>
      </GridContent>
  );
};
export default Settings;
